<template>
  <md-nav-bar title="支付成功" :showLeft="false" />
  <view class="container">
    <image src="/static/svg/success.svg" alt="成功" class="success-icon" />
    <view class="title">报名成功（已支付）</view>
    <view class="message m-bottom-20">您已获得名额，请注意关注活动通知消息！</view>
    <md-button
      :color="data.configInfo?.['button_color1'] || '#1CA4C0'"
      :text-color="data.configInfo?.['button_color1_text'] || '#ffffff'"
      @click="goHome">
      返回首页
    </md-button>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';

const data = reactive<any>({
  configInfo: {}, // 全局配置信息
});

const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index',
  });
};

onLoad(option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  console.log(configInfo);
  if (configInfo) {
    data.configInfo = configInfo;
  }
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  box-sizing: border-box;
  .success-icon {
    width: 300rpx;
    height: 300rpx;
  }
  .title {
    font-size: $fs-40;
    font-weight: bold;
    margin: 40rpx 0 20rpx;
  }
  .message {
    font-size: $fs-28;
    color: $sub;
  }
}
</style>
